<template>
  <div class="rank">
    <!-- 顶部组件 -->
    <header-nav></header-nav>

    <div class="toplist">
      <div
        class="item"
        v-for="item in playList"
        :key="item.id"
        @click="$router.push(`/recommend/detail/${item.id}`)"
      >
        <div class="imgs">
          <van-image
            class="img"
            width="90"
            height="90"
            lazy-load
            :src="item.coverImgUrl"
          />
        </div>
        <ul>
          <li
            v-for="(key, index) in item.tracks"
            :key="key.id"
            v-show="index < 3"
          >
            {{ index + 1 }}.{{ key.name }}-{{ key.ar[0].name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getToplist, getPlaylistDetail } from "../api/rank";
export default {
  data() {
    return {
      playList: [],
    };
  },
  methods: {
    async getToplistFun() {
      const { list } = await getToplist();
      for (let i = 0; i < list.length; i++) {
        let id = list[i].id;
        const { playlist } = await getPlaylistDetail(id);
        this.playList.push(playlist);
      }
    },
  },
  created() {
    this.getToplistFun();
  },
};
</script>

<style lang="less">
.rank {
  height: 100vh;
  background: url("../assets/bg.webp") no-repeat;
  background-size: 100%;
  .toplist {
    padding: 10px;
    height: 88vh;
    overflow-x: hidden;
    .item {
      padding: 2px 0px;
      border-bottom: 1px solid #e1e2e2;
      height: 95px;
      display: flex;
      .imgs {
        flex: 0 0 90px;
        margin-right: 18px;
        background-color: chocolate;
        width: 90px;
        height: 90px;
        .img .van-image__img {
          border-radius: 4px;
        }
      }
      ul {
        flex: 1;
        height: 90px;
        margin-top: 4px;
        li {
          height: 27px;
          line-height: 27px;
          font-size: 12px;
          color: #1b1b28;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
